﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>Visible 可见性操作 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link active" href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>概览</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#positioning" class="nav-link"><span>定位</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#triggers" class="nav-link"><span>触发器</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#making-tooltips-work-for-keyboard-and-assistive-technology-users" class="nav-link"><span>键盘提示以及辅助用户使用</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disabled-elements" class="nav-link"><span>禁用元素</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#caveats-with-focus-trigger-on-button-elements" class="nav-link"><span>注意事项 focus 触发button 元素</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dismiss-on-next-click" class="nav-link"><span>下次点击时关闭</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#title-content" class="nav-link"><span>标题内容</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#variants-and-custom-class" class="nav-link"><span>变体和自定义类</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-syntax-and-usage" class="nav-link"><span>指令语法和用法</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#usage" class="nav-link"><span>用例</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#hiding-and-showing-tooltips-via-root-events" class="nav-link"><span>通过$ root事件隐藏和显示工具提示</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabling-and-enabling-tooltips-via-root-events" class="nav-link"><span>通过$ root事件禁用和启用工具提示</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>参阅</span></a> </li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#directive-reference" class="nav-link"><span>指令参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-directives" class="nav-link"><span>导入单个指令</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/directives/" class="nuxt-link-active" target="_self">指令</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">Visible 可见性操作</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">Visible 可见性操作</h1>
  <p class="bd-lead">使用Bootstrap v4 默认CSS样式和动画，添加自定义BootstrapVue工具提示的文档和示例，包括鼠标悬停、聚焦或单击元素来触发工具提示等效果。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<p> <code class="text-nowrap" translate="no">v-b-tooltip</code> 组件能够实现tooltip的提示效果。
appear.</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip">
<div class="text-center my-3">
<button title="Tooltip content" type="button" class="btn btn-secondary">Hover Me</button>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center my-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip content"</span>&gt;</span>Hover Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">概览<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>使用tooltip指令时要了解的事项：</p>
<ul>
<li>工具提示依赖于第三方库<a href="https://popper.js.org/" target="_blank" rel="noopener">Popper.js</a> 进行定位。</li>
<li>工具提示需要BootstrapVue的自定义SCSS / CSS才能正常运行，并提供变体。</li>
<li>如果未提供标题（或为空字符串），则不会提示。</li>
<li>指定容器：“ body”（默认），以避免在更复杂的组件（如输入组，按钮组等）中出现渲染问题。</li>
<li>在隐藏元素上触发工具提示将无效</li>
<li><code class="text-nowrap" translate="no">disabled</code> 必须在包装器元素上触发禁用元素的工具提示。</li>
<li>从跨越多行的超链接触发时，工具提示将居中。 在你使用
white-space: nowrap; <code class="text-nowrap" translate="no">&lt;a&gt;</code>s、 <code class="text-nowrap" translate="no">&lt;b-link&gt;</code>s、 <code class="text-nowrap" translate="no">&lt;router-link&gt;</code>s, 必须避免这个操作。</li>
<li>在从DOM中删除其相应元素之前，必须先隐藏工具提示。</li>
</ul>
<h2 id="positioning" class="bv-no-focus-ring"><span class="bd-content-title">定位<a class="anchorjs-link" href="#positioning" aria-labelledby="positioning"></a></span></h2>
<p>以下十二个选项可用于定位：<code class="text-nowrap" translate="no">top</code>、<code class="text-nowrap" translate="no">topleft</code>、<code class="text-nowrap" translate="no">topright</code>、 <code class="text-nowrap" translate="no">right</code>、<code class="text-nowrap" translate="no">righttop</code>、<code class="text-nowrap" translate="no">rightbottom</code>、 <code class="text-nowrap" translate="no">bottom</code>、 <code class="text-nowrap" translate="no">bottomleft</code>、 <code class="text-nowrap" translate="no">bottomright</code>、 <code class="text-nowrap" translate="no">left</code>、 <code class="text-nowrap" translate="no">lefttop</code>、 <code class="text-nowrap" translate="no">leftbottom</code>
默认位置是 <code class="text-nowrap" translate="no">top</code>，相对于触发的元素进行定位。</p>
<div class="bd-example bd-example-tooltip-static">
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" style="left: calc(50% - 6px)"></div>
<div class="tooltip-inner">Tooltip on the top</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" style="right: 0px"></div>
<div class="tooltip-inner">Tooltip on the topleft</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" style="left: 0px"></div>
<div class="tooltip-inner">Tooltip on the topright</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" style="top: 5px"></div>
<div class="tooltip-inner">Tooltip on the right</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" style="bottom: 0px"></div>
<div class="tooltip-inner">Tooltip on the righttop</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" style="top: 0px"></div>
<div class="tooltip-inner">Tooltip on the rightbottom</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" style="left: calc(50% - 6px)"></div>
<div class="tooltip-inner">Tooltip on the bottom</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" style="right: 0px"></div>
<div class="tooltip-inner">Tooltip on the bottomleft</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" style="left: 0px"></div>
<div class="tooltip-inner">Tooltip on the bottomright</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" style="top: 5px"></div>
<div class="tooltip-inner">Tooltip on the left</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" style="bottom: 0px"></div>
<div class="tooltip-inner">Tooltip on the lefttop</div>
</div>
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" style="top: 0px"></div>
<div class="tooltip-inner">Tooltip on the leftbottom</div>
</div>
</div>
<p><strong>示例如下</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-positioning">
<div>
<div class="container-fluid">
<div class="row text-center">
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Top left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom right</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Bottom left</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Left bottom</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right top</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-primary">Right bottom</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.top</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.right</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.left</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.bottom</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.topright</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.topleft</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Top left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.bottomright</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.bottomleft</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Bottom left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.lefttop</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.leftbottom</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Left bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.righttop</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right top<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.rightbottom</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Right bottom<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h2 id="triggers" class="bv-no-focus-ring"><span class="bd-content-title">触发器<a class="anchorjs-link" href="#triggers" aria-labelledby="triggers"></a></span></h2>
<p>可以通过以下任意组合来触发（打开/关闭）工具提示： <code class="text-nowrap" translate="no">click</code>、 <code class="text-nowrap" translate="no">hover</code>、 <code class="text-nowrap" translate="no">focus</code>。
默认的触发器是 <code class="text-nowrap" translate="no">hover focus</code>。 或者可以指定一个手动触发器，其中只能以 <a href="#hiding-and-showing-tooltips-via-root-events" class="font-weight-bold">programmatically</a>打开或关闭弹窗。</p>
<p>如果工具提示中有多个触发器，则必须先清除所有触发器，然后工具提示才会
  关。 即 如果工具提示具有触发器 <code class="text-nowrap" translate="no">focus click</code>, 被打开 <code class="text-nowrap" translate="no">focus</code>,
然后单击触发元素, 那就必须再次触发 click <strong>和</strong> 移动焦点以关闭工具提示。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-triggers">
<div>
<div class="container">
<div class="row text-center">
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Hover + Focus</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Hover</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Click</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-outline-success">Focus</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Hover + Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.click</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Click<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.focus</span>=<span class="hljs-string">"'Tooltip!'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h3 id="making-tooltips-work-for-keyboard-and-assistive-technology-users" class="bv-no-focus-ring"><span class="bd-content-title">键盘提示以及辅助用户使用<a class="anchorjs-link" href="#making-tooltips-work-for-keyboard-and-assistive-technology-users" aria-labelledby="making-tooltips-work-for-keyboard-and-assistive-technology-users"></a></span></h3>
<p>您只需在传统键盘上为焦点的HTML元素添加工具提示，
  互动式（例如链接，按钮或表单控件）。 尽管任意HTML元素（例如 <code class="text-nowrap" translate="no">&lt;span&gt;</code>s) 可以通过添加<code class="text-nowrap" translate="no">tabindex="0"</code> 属性, 这会让使用键盘的用户在非交互式元素上增加潜在的令人讨厌和混乱的制表位。 此外，在这种情况下，目前大多数辅助技术都不会公布工具提示。</p>
<p>此外，不要仅仅依靠 <code class="text-nowrap" translate="no">hover</code> 作为工具提示的触发器, <em>因为这将使键盘用户无法触发您的工具提示。</em>.</p>
<h3 id="disabled-elements" class="bv-no-focus-ring"><span class="bd-content-title">禁用元素<a class="anchorjs-link" href="#disabled-elements" aria-labelledby="disabled-elements"></a></span></h3>
<p>具有 <code class="text-nowrap" translate="no">disabled</code> 属性的元素不是交互式的, 表示用户无法专注，悬停或
  单击它们以触发工具提示（或弹出窗口）。 解决方法是，您需要从wrapper上触发工具提示
   <code class="text-nowrap" translate="no">&lt;div&gt;</code> or <code class="text-nowrap" translate="no">&lt;span&gt;</code>, 理想地使键盘聚焦使用 <code class="text-nowrap" translate="no">tabindex="0"</code>,
   覆盖禁用元素上的 <code class="text-nowrap" translate="no">pointer-events</code>。</p>
<div translate="translate" class="bd-example vue-example vue-example-disabled-trigger-element">
<div><span tabindex="0" title="Disabled tooltip" class="d-inline-block">
<button type="button" disabled="disabled" class="btn btn-primary disabled" style="pointer-events: none;">Disabled button</button>
</span></div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">v-b-tooltip.top</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled tooltip"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"pointer-events: none;"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
</div>
<h3 id="caveats-with-focus-trigger-on-button-elements" class="bv-no-focus-ring"><span class="bd-content-title">注意事项 <code class="text-nowrap" translate="no">focus</code> 触发 <code class="text-nowrap" translate="no">&lt;button&gt;</code> 元素<a class="anchorjs-link" href="#caveats-with-focus-trigger-on-button-elements" aria-labelledby="caveats-with-focus-trigger-on-button-elements"></a></span></h3>
<p>仅使用以下选项时，为了实现正确的跨浏览器和跨平台行为 <code class="text-nowrap" translate="no">focus</code> 触发器, 你必须
  使用可呈现的 <code class="text-nowrap" translate="no">&lt;a&gt;</code> 标签, 不能没有 <code class="text-nowrap" translate="no">&lt;button&gt;</code> 标签, 并且还必须要包含<code class="text-nowrap" translate="no">tabindex="0"</code> 属性.</p>
<p>下面生成一个看起来像 <code class="text-nowrap" translate="no">&lt;a&gt;</code> 标签的按钮</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
  <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>
  <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>
  <span class="hljs-attr">v-b-tooltip.focus</span>
  <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip title"</span>
&gt;</span>
  Link button with tooltip directive
<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<h3 id="dismiss-on-next-click" class="bv-no-focus-ring"><span class="bd-content-title">下次点击时关闭<a class="anchorjs-link" href="#dismiss-on-next-click" aria-labelledby="dismiss-on-next-click"></a></span></h3>
<p>选择<code class="text-nowrap" translate="no">click</code> 和 <code class="text-nowrap" translate="no">blur</code>时， 如果您希望仅在单击元素时打开工具提示，但是
  单击文档中的其他任何内容或获得焦点时，它将关闭。</p>
<p>请注意，您的元素 <strong>必须</strong> 在文档选项卡序列中才能起作用。 如果您的元素不可标签，则将 <code class="text-nowrap" translate="no">tabindex="0"</code> 属性添加到该元素。</p>
<h2 id="title-content" class="bv-no-focus-ring"><span class="bd-content-title">标题内容<a class="anchorjs-link" href="#title-content" aria-labelledby="title-content"></a></span></h2>
<p>有几个选项可提供工具提示的标题。</p>
<p>默认情况下，工具提示将使用 <code class="text-nowrap" translate="no">title</code> 属性作为工具提示内容。 标题也可以以对象的形式传递给 <code class="text-nowrap" translate="no">v-b-tooltip</code>。</p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">title</span>: <span class="hljs-string">'This is the title'</span>
}</pre>
</div>
<p>如果标题内容具有基本的HTML标记，则还需要将 <code class="text-nowrap" translate="no">html</code> 属性设置为true，或使用指令修饰符 <code class="text-nowrap" translate="no">html</code></p>
<!-- eslint-disable no-unused-vars -->

<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-comment">// Object format with HTML</span>
<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">title</span>: <span class="hljs-string">'This is the &lt;strong&gt;title&lt;/strong&gt;'</span>,
  <span class="hljs-attr">html</span>: <span class="hljs-literal">true</span>
}</pre>
</div>
<p>标题也可以是一个函数引用，每次打开工具提示时都会调用它。 要使打开的函数返回的标题具有反应性，请在内容更改时将标题设置为 <em>new</em> 函数引用。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-content">
<div class="container">
<div class="row text-center">
<div class="py-3 col-md-3">
<button title="Tip from title attribute Sun Mar 08 2020 15:16:01 GMT+0800 (中国标准时间)" type="button" class="btn btn-success">Title</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">String</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">Data</button>
</div>
<div class="py-3 col-md-3">
<button type="button" class="btn btn-success">Method</button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"'Tip from title attribute ' + date"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"'String Tip'"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>String<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.html</span>=<span class="hljs-string">"tipData"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Data<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.html</span>=<span class="hljs-string">"tipMethod"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Method<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tipData</span>: { <span class="hljs-attr">title</span>: <span class="hljs-string">'Tooltip &lt;em&gt;Message&lt;/em&gt;'</span> },
        <span class="hljs-attr">date</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(),
        <span class="hljs-attr">timer</span>: <span class="hljs-literal">null</span>
      }
    },
    mounted() {
      <span class="hljs-keyword">this</span>.timer = setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.date = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
      }, <span class="hljs-number">1000</span>)
    },
    beforeDestroy() {
      clearInterval(<span class="hljs-keyword">this</span>.timer)
    },
    <span class="hljs-attr">methods</span>: {
      tipMethod() {
        <span class="hljs-comment">// Note this is called each time the tooltip is first opened.</span>
        <span class="hljs-keyword">return</span> <span class="hljs-string">'&lt;strong&gt;'</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>() + <span class="hljs-string">'&lt;/strong&gt;'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
</div>
<h2 id="variants-and-custom-class" class="bv-no-focus-ring"><span class="bd-content-title">变体和自定义类<a class="anchorjs-link" href="#variants-and-custom-class" aria-labelledby="variants-and-custom-class"></a></span></h2>
<p>BootstrapVue的工具提示通过我们的自定义CSS支持上下文颜色变量，可以使用指令修饰符或配置选项：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tooltip-variants">
<div class="container-fluid">
<div class="row text-center">
<div class="col">
<button title="Danger variant" type="button" class="btn btn-secondary">Danger Modifier</button>
</div>
<div class="col">
<button title="Info variant" type="button" class="btn btn-secondary">Info Config</button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover.v-danger</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Danger variant"</span>&gt;</span>Danger Modifier<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"{ variant: 'info' }"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Info variant"</span>&gt;</span>Info Config<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre>
</div>
<p>Bootstrap默认主题变体是： <code class="text-nowrap" translate="no">danger</code>、 <code class="text-nowrap" translate="no">warning</code>、 <code class="text-nowrap" translate="no">success</code>、 <code class="text-nowrap" translate="no">primary</code>、 <code class="text-nowrap" translate="no">secondary</code>、 <code class="text-nowrap" translate="no">info</code>、 <code class="text-nowrap" translate="no">light</code>、 and <code class="text-nowrap" translate="no">dark</code>。 您可以通过Bootstrap更改或添加其他SCSS变体 <a href="/docs/reference/theming" class="font-weight-bold">。</a></p>
<p>可以将自定义类应用于工具提示wrapper <code class="text-nowrap" translate="no">&lt;div&gt;</code> 通过使用 <code class="text-nowrap" translate="no">customClass</code> 其它选项属性:</p>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip.hover</span>=<span class="hljs-string">"{ customClass: 'my-tooltip-class' }"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<h2 id="directive-syntax-and-usage" class="bv-no-focus-ring"><span class="bd-content-title">指令语法和用法<a class="anchorjs-link" href="#directive-syntax-and-usage" aria-labelledby="directive-syntax-and-usage"></a></span></h2>
<div class="bd-code">
<pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-tooltip:</span>[<span class="hljs-attr">container</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod1</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">mod2</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">...</span>]<span class="hljs-attr">.</span>[<span class="hljs-attr">modN</span>]=<span class="hljs-string">"&lt;value&gt;"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span></pre>
</div>
<p>其中 <code class="text-nowrap" translate="no">[container]</code> 可以是 (可选的):</p>
<ul>
<li>元素ID（减去＃），用于在其中放置工具提示标记</li>
<li>如果未提供，则工具提示将附加到 <code class="text-nowrap" translate="no">body</code>. 如果触发元素在模式内部，
  工具提示将附加到模态的容器</li>
</ul>
<p>其中 <code class="text-nowrap" translate="no">[modX]</code> 可以是（所有可选）：</p>
<ul>
<li>定位: <code class="text-nowrap" translate="no">top</code>、 <code class="text-nowrap" translate="no">bottom</code>、 <code class="text-nowrap" translate="no">left</code>、 <code class="text-nowrap" translate="no">right</code>、 <code class="text-nowrap" translate="no">auto</code>、 <code class="text-nowrap" translate="no">topleft</code>、 <code class="text-nowrap" translate="no">topright</code>、 <code class="text-nowrap" translate="no">bottomleft</code>、 <code class="text-nowrap" translate="no">bottomright</code>、 <code class="text-nowrap" translate="no">lefttop</code>、 <code class="text-nowrap" translate="no">leftbottom</code>、 <code class="text-nowrap" translate="no">righttop</code>、 或 <code class="text-nowrap" translate="no">rightbottom</code> (最后一个 wins,
默认为<code class="text-nowrap" translate="no">top</code>).</li>
<li>触发事件: <code class="text-nowrap" translate="no">click</code>, <code class="text-nowrap" translate="no">hover</code>, <code class="text-nowrap" translate="no">focus</code>, <code class="text-nowrap" translate="no">blur</code> (如果为指定, 则默认为 <code class="text-nowrap" translate="no">focus</code> and <code class="text-nowrap" translate="no">hover</code>. <code class="text-nowrap" translate="no">blur</code> 仅仅是一个关闭处理程序, 并且如果由其自身指定，将被转换为 <code class="text-nowrap" translate="no">focus</code>)。 用 <code class="text-nowrap" translate="no">manual</code> 如果您只想手动控制可见性。</li>
<li><code class="text-nowrap" translate="no">nofade</code> 关闭动画</li>
<li><code class="text-nowrap" translate="no">html</code> 以启用呈现原始HTML。 默认情况下，HTML被转义并转换为文本。</li>
<li>格式为 <code class="text-nowrap" translate="no">d###</code> (其中 <code class="text-nowrap" translate="no">###</code> 的延迟值, 默认值为  <code class="text-nowrap" translate="no">50</code>), 应用于 <code class="text-nowrap" translate="no">hide</code> and <code class="text-nowrap" translate="no">show</code>.</li>
<li>显示延迟值，格式为 <code class="text-nowrap" translate="no">ds###</code> (其中 <code class="text-nowrap" translate="no">###</code> 以毫秒为单位, 默认值为<code class="text-nowrap" translate="no">50</code>), 仅用于 <code class="text-nowrap" translate="no">show</code> 触发器</li>
<li>隐藏延迟值，格式为 <code class="text-nowrap" translate="no">dh###</code> (where <code class="text-nowrap" translate="no">###</code> 以毫秒为单位, 默认值为 <code class="text-nowrap" translate="no">50</code>), 仅用于 <code class="text-nowrap" translate="no">hide</code> 触发器</li>
<li>以像素为单位的偏移值，格式为<code class="text-nowrap" translate="no">o###</code> (其中 <code class="text-nowrap" translate="no">###</code> 是像素数，默认为，
   <code class="text-nowrap" translate="no">0</code>。 允许负值)。</li>
<li>边界设置 <code class="text-nowrap" translate="no">window</code> or <code class="text-nowrap" translate="no">viewport</code>。 限制工具提示的视觉位置的元素。 如果未指定，则边界默认为触发器元素的滚动父级（在大多数情况下就足够了）。</li>
<li>以下形式的上下文变体 <code class="text-nowrap" translate="no">v-XXX</code> (其中 <code class="text-nowrap" translate="no">XXX</code> 是颜色变体的名称)。</li>
<li><code class="text-nowrap" translate="no">noninteractive</code> 可以使工具提示不与用户交互。</li>
</ul>
<p>其中 <code class="text-nowrap" translate="no">&lt;value&gt;</code> 是（可选的）：</p>
<ul>
<li>包含工具提示标题的字符串</li>
<li>用于生成工具提示标题的函数引用（接收一个arg，该arg是对触发工具提示的DOM元素的引用）</li>
<li>包含工具提示的更复杂配置的对象。 接受对象见下文
  特性：</li>
</ul>
<p><strong>选项配置对象属性：</strong></p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="text-nowrap" translate="no">animation</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">true</code></td>
<td>将CSS淡入淡出过渡应用于工具提示</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">container</code></td>
<td>String ID or HTMLElement or <code class="text-nowrap" translate="no">false</code></td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>将工具提示附加到特定元素。 例：<code class="text-nowrap" translate="no">container: '#body'</code>。 此选项特别有用，因为它允许您将工具提示放置在文档流中靠近触发元素的位置-这样可以防止在调整窗口大小时工具提示从触发元素上浮走。当设置为<code class="text-nowrap" translate="no">false</code> 时，工具提示将附加到 <code class="text-nowrap" translate="no">body</code>,或者，如果触发器元素在模式内部，则它将附加到模式的容器中。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">delay</code></td>
<td>Number or Object</td>
<td><code class="text-nowrap" translate="no">50</code></td>
<td>延迟显示和隐藏工具提示（毫秒）。如果提供了编号，则延迟将同时应用于隐藏/显示。 对象结构是：<code class="text-nowrap" translate="no">delay: { "show": 500, "hide": 100 }</code></td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">html</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>在工具提示中允许HTML。 如果为true，则将在工具提示中呈现工具提示标题中的HTML标签。 如果为false，则标题将作为纯文本插入。 如果您担心XSS攻击，请使用文字。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">placement</code></td>
<td>String or Function</td>
<td><code class="text-nowrap" translate="no">'top'</code></td>
<td>如何放置工具提示 - <code class="text-nowrap" translate="no">auto</code>, <code class="text-nowrap" translate="no">top</code>、 <code class="text-nowrap" translate="no">bottom</code>, <code class="text-nowrap" translate="no">left</code>、 <code class="text-nowrap" translate="no">right</code>、 <code class="text-nowrap" translate="no">topleft</code>、 <code class="text-nowrap" translate="no">topright</code>、 <code class="text-nowrap" translate="no">bottomleft</code>、 <code class="text-nowrap" translate="no">bottomright</code>、 <code class="text-nowrap" translate="no">lefttop</code>、 <code class="text-nowrap" translate="no">leftbottom</code>、 <code class="text-nowrap" translate="no">righttop</code>、<code class="text-nowrap" translate="no">rightbottom</code>。 指定 <code class="text-nowrap" translate="no">auto</code> 时，它将动态调整工具提示的方向。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">title</code></td>
<td>String or Element or Function</td>
<td><code class="text-nowrap" translate="no">''</code></td>
<td>如果没有标题属性，则为默认标题值。 如果给出了一个函数，它必须返回一个字符串。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">trigger</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">'hover focus'</code></td>
<td>工具提示的触发方式： <code class="text-nowrap" translate="no">click</code>、 <code class="text-nowrap" translate="no">hover</code>、 <code class="text-nowrap" translate="no">focus</code>。 可以传递多个触发器；用空格分隔它们。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">offset</code></td>
<td>Number or String</td>
<td><code class="text-nowrap" translate="no">0</code></td>
<td>工具提示相对于其目标的偏移量。 有关更多信息，请参阅Popper.js的offsets文档。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">fallbackPlacement</code></td>
<td>String or Array</td>
<td><code class="text-nowrap" translate="no">'flip'</code></td>
<td>允许指定Popper在回退时将使用的位置。使用 <code class="text-nowrap" translate="no">flip</code>, <code class="text-nowrap" translate="no">clockwise</code>, <code class="text-nowrap" translate="no">counterclockwise</code> 可以进行翻转，顺时针，逆时针或一系列放置。 有关更多信息，请参阅Popper.js的行为文档。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">boundary</code></td>
<td>String ID or HTMLElement</td>
<td><code class="text-nowrap" translate="no">'scrollParent'</code></td>
<td>工具提示将在视觉上受到约束的容器。 在大多数情况下，默认值就足够了，但是如果目标元素位于带有溢出滚动的小容器中，则可能需要更改此设置。 支持的值： <code class="text-nowrap" translate="no">'scrollParent'</code> (默认值), <code class="text-nowrap" translate="no">'viewport'</code>, <code class="text-nowrap" translate="no">'window'</code>, 或引用HTML元素。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">boundaryPadding</code></td>
<td>Number</td>
<td><code class="text-nowrap" translate="no">5</code></td>
<td>用于定义边界和工具提示之间的最小距离的像素数量。 这样可以确保工具提示在其容器的边缘之间始终有少许填充物。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">interactive</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">true</code></td>
<td>工具提示是否应与用户互动。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">variant</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>工具提示的上下文颜色变体。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">customClass</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>应用于工具提示外部包装器元素的自定义类名。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">id</code></td>
<td>String</td>
<td><code class="text-nowrap" translate="no">null</code></td>
<td>在工具提示根元素上使用的ID。 如果没有提供，将自动生成一个。 如果确实提供ID，则 <em>必须</em> 确保该ID在呈现的页面上是唯一的。</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">disabled</code></td>
<td>Boolean</td>
<td><code class="text-nowrap" translate="no">false</code></td>
<td>设置 <code class="text-nowrap" translate="no">true</code> 禁用工具提示。</td>
</tr>
</tbody>
</table>
</div>
<h3 id="usage" class="bv-no-focus-ring"><span class="bd-content-title">用例<a class="anchorjs-link" href="#usage" aria-labelledby="usage"></a></span></h3>
<p><strong>最简单的用法：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip="'This is a Tooltip!'"</pre>
</div>
<p>或使用元素的 <code class="text-nowrap" translate="no">title</code>属性作为工具提示内容：</p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip title="This is a title Tooltip"</pre>
</div>
<p><strong>展示位置示例：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.bottom
v-b-tooltip.right</pre>
</div>
<p><strong>变体示例：
</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.v-primary =&gt; `primary` variant
v-b-tooltip.v-danger =&gt; `danger` variant</pre>
</div>
<p><strong>触发示例：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.hover =&gt; Hover only
v-b-tooltip.click =&gt; Click only
v-b-tooltip.hover.focus =&gt; Both hover and focus</pre>
</div>
<p><strong>组合：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip.hover.bottom =&gt; Show on hover and place at bottom
v-b-tooltip.bottom.hover =&gt; Same as above
v-b-tooltip.bottom.hover.v-danger =&gt; Same as above, but with variant</pre>
</div>
<p><strong>对象：</strong></p>
<div class="bd-code">
<pre class="hljs  p-2" translate="no">v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }"</pre>
</div>
<h2 id="hiding-and-showing-tooltips-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$ root事件隐藏和显示工具提示<a class="anchorjs-link" href="#hiding-and-showing-tooltips-via-root-events" aria-labelledby="hiding-and-showing-tooltips-via-root-events"></a></span></h2>
<p>您可以关闭（隐藏） <strong>所有打开的工具提示</strong> 通过<code class="text-nowrap" translate="no"> bv::hide::tooltip</code> 发射 $ root上的事件：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::tooltip'</span>)</pre>
</div>
<p>要关闭<strong> specific tooltip，</strong>,请将触发器元素的 <code class="text-nowrap" translate="no">id</code>,或 <code class="text-nowrap" translate="no">id</code> 作为工具提示的（如果config对象中提供了该工具的ID）作为第一个参数传递： </p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要打开 <strong>specific tooltip</strong>, 请将触发器元素的 <code class="text-nowrap" translate="no">id</code>, 或 <code class="text-nowrap" translate="no">id</code> 作为工具提示（如果有的话
  是在config对象中提供的）作为发出时的第一个参数 <code class="text-nowrap" translate="no">bv::show::tooltip</code> $root event:</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要同时打开所有弹出窗口，请省略 <code class="text-nowrap" translate="no">id</code> 发出时的参数 <code class="text-nowrap" translate="no">bv::show::tooltip</code> 事件</p>
<p>这些事件对两个组件均有效 <strong>and</strong>工具提示的指令版本。</p>
<p>请注意 <strong>trigger 元素</strong> 必须存在于DOM中并且处于可见状态，以便显示工具提示。</p>
<h2 id="disabling-and-enabling-tooltips-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$ root事件禁用和启用工具提示<a class="anchorjs-link" href="#disabling-and-enabling-tooltips-via-root-events" aria-labelledby="disabling-and-enabling-tooltips-via-root-events"></a></span></h2>
<p>你可以通过<strong>所有打开的工具提示</strong>通过发射<code class="text-nowrap" translate="no">bv::disable::tooltip</code> $ root上的事件：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::tooltip'</span>)</pre>
</div>
<p>禁用 <strong>specific tooltip</strong>, 触发元素的 <code class="text-nowrap" translate="no">id</code>, or the <code class="text-nowrap" translate="no">id</code> 工具提示的（如果
  config对象中提供了一个）作为第一个参数：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::disable::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>启用 <strong>specific tooltip</strong>, 通过触发元素的 <code class="text-nowrap" translate="no">id</code>, or the <code class="text-nowrap" translate="no">id</code> 工具提示的（如果
  发出config对象时提供的第一个参数） <code class="text-nowrap" translate="no">bv::enable::tooltip</code> $root 事件：</p>
<div class="bd-code">
<pre class="hljs js p-2" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::enable::tooltip'</span>, <span class="hljs-string">'my-trigger-button-id'</span>)</pre>
</div>
<p>要同时启用所有弹出窗口，请省略 <code class="text-nowrap" translate="no">id</code> 发出时的参数 <code class="text-nowrap" translate="no">bv::enable::tooltip</code> 事件。</p>
<p>这些事件适用于工具提示的组件版本 <strong>和</strong> 指令版本。</p>
<p>注意<strong> trigger element</strong> 必须在DOM中存在才能启用或禁用工具提示。
  残障人士。</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="/docs/directives/popover" class="font-weight-bold"><code class="text-nowrap" translate="no">v-b-popover</code> directive</a></li>
<li><a href="/docs/components/tooltip" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-tooltip&gt;</code> component</a></li>
<li><a href="/docs/components/popover" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-popover&gt;</code> component</a></li>
</ul>
<!-- Directive reference section auto generated from directive package.json -->

<h2 id="directive-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">指令参考<a href="/docs/directives/tooltip#directive-reference" class="anchorjs-link" aria-labelledby="directive-reference" target="_self"></a></span></h2>
<h3 id="importing-individual-directives" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个指令 <a href="/docs/directives/tooltip#importing-individual-directives" class="anchorjs-link" aria-labelledby="importing-individual-directives" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个指令导入到您的项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__724">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">指令参考</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名为 Export</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">v-b-tooltip</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBTooltip</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例如：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBTooltip } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
<span class="hljs-comment">// Note: Vue automatically prefixes the directive name with 'v-'</span>
Vue.directive(<span class="hljs-string">'b-tooltip'</span>, VBTooltip)</pre>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">作为Vue.js插件导入 <a href="/docs/directives/tooltip#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个指令。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__734">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名为 Export</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBTooltipPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>列如：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBTooltipPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(VBTooltipPlugin)</pre>



</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
